<style lang="less">
  .f-w70{
    width: 70% !important;
  }
  .f-c-red{
    color: red;
  }
  .f-c-green{
    color: green;
  }
  .my-toolbar {
    background: #f2f2f2;
    padding: 10px;
    overflow: hidden;
    margin: 0px 0px 10px 0px;
    .el-form-item{
      margin-bottom: 5px;
    }
  }
  .top-info-style {
    font-size: 16px;padding: 5px
  }
  .statistics{
    white-space: nowrap;
    padding: 2px 5px;
    height: 28px;
    line-height: 28px;
  }
</style>
<template>
  <section>
    <el-col :span="24" class="my-toolbar"  style="background-color: #FFE4B5;height: 60px">
      <el-form>
        <el-col :span="2" >
          <el-button type="text" @click="backClick" style="font-size: 16px"> &lt; 返回</el-button>
        </el-col>
        <el-col :span="4">
          <label class="top-info-style">领头羊 :</label>
          <label class="top-info-style">{{truckBellwetherIncomeTotal.truckBellwetherRealName}}</label>
        </el-col>
        <el-col :span="18">
          <el-row>
            <el-col :span="5">
              <label class="top-info-style">累计收益(元) :</label>
            </el-col>
            <el-col :span="5">
              <label class="top-info-style">已销账总额(元) :</label>
            </el-col>
            <el-col :span="5">
              <label class="top-info-style">可销账总额(元) :</label>
            </el-col>
            <el-col :span="5">
              <label class="top-info-style">不可销账总额(元) :</label>
            </el-col>
            <el-col :span="4">
              <label class="top-info-style">挂账金额(元) :</label>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="5">
              <label class="top-info-style">{{truckBellwetherIncomeTotal.totalIncome}}</label>
            </el-col>
            <el-col :span="5">
              <label class="top-info-style">{{truckBellwetherIncomeTotal.totalWithdrawal}}</label>
            </el-col>
            <el-col :span="5">
              <label class="top-info-style">{{truckBellwetherIncomeTotal.avauseAmt}}</label>
            </el-col>
            <el-col :span="5">
              <label class="top-info-style">{{truckBellwetherIncomeTotal.freezeAmt}}</label>
            </el-col>
            <el-col :span="4">
              <label class="top-info-style">{{truckBellwetherIncomeTotal.hangUp}}</label>
            </el-col>
          </el-row>
        </el-col>
      </el-form>
    </el-col>
    <el-col :span="24" class="my-toolbar">
      <el-form ref="searchCondition" :model="searchCondition" label-position="right" label-width="120px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="订单编号">
              <el-input v-model="searchCondition.LIKE_truckLoadNumber" class="f-w70" placeholder="请输入订单编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="装车时间">
              <el-date-picker class="f-w70" v-model="searchConditionEx.loadingTimeDateRange" type="daterange" placeholder="选择日期范围">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="卸车时间">
              <el-date-picker class="f-w70" v-model="searchConditionEx.unloadTimeDateRange"  type="daterange" placeholder="选择日期范围">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item class="f-mb" label="订单状态">
              <el-select v-model="searchConditionEx.EQ_truckLoadOrderStatus" class="f-w70"
                         placeholder="请选择">
                <el-option
                  v-for="item in $store.getters.CARLOAD_ORDER"
                  :key="item.dictVal"
                  :label="item.cnDictValname"
                  :value="item.dictVal">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="f-mb" label="销账状态">
              <el-select v-model="searchCondition.EQ_writeOffStatus" class="f-w70"
                         placeholder="请选择">
                <el-option
                  v-for="item in $store.getters.WRITE_OFF_STATUS"
                  :key="item.dictVal"
                  :label="item.cnDictValname"
                  :value="item.dictVal">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="司机姓名">
              <el-input v-model="searchConditionEx.LIKE_truckLoadOrderTruckLoadDriverDriverName" class="f-w70" placeholder="请输入司机姓名"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-col>
    <el-col :span="24" style="margin-bottom: 10px">
      <el-button type="primary" @click="resetSearchCondition" style="float: right">重置</el-button>
      <el-button type="primary" @click="searchTableList" style="float: right;margin-right: 10px">查询</el-button>
      <el-button type="primary" @click="exportToExcel()" style="float: right;">导出</el-button>
    </el-col>
    <el-table v-loading="listLoading" ref="tableData" max-height="520"
              show-summary
              :summary-method="getSummaries"
              :data="tableData" border tooltip-effect="dark" style="width: 100% ;margin-top: 10px">
      <el-table-column type="index" label="序号" width="50" align="center">
      </el-table-column>
      <el-table-column prop="truckLoadNumber" label="订单编号" width="150" align="center">
        <template slot-scope="scope">
          <a style="cursor: pointer;text-decoration:underline;color: #20a0ff" @click="selectTruckLoadDialogClick(scope.row,true)">
            {{scope.row.truckLoadNumber}}
          </a>
        </template>
      </el-table-column>
      <el-table-column prop="createdDate" label="日期" width="220" headeer-align="center">
        <template slot-scope="scope">
          下单日期 {{scope.row.createdDate}}<br>
          装车时间 {{scope.row.loadingTime}}<br>
          卸车时间 {{scope.row.unloadTime}}
        </template>
      </el-table-column>
      <el-table-column prop="startContactName" label="客户信息" width="150" headeer-align="center">
        <template slot-scope="scope">
          {{scope.row.startContactName}}<br>
          {{scope.row.startContactPhone}}
        </template>
      </el-table-column>
      <el-table-column prop="orderAmt" label="运费(元)" width="100" header-align="center">
      </el-table-column>
      <el-table-column prop="infofeeAmt" label="信息费(元)" width="100" header-align="center">
        <template slot-scope="scope">
          <label v-if="scope.row.payStatus === 101003003" style="color: red">
            <label>{{scope.row.infofeeAmt}}</label><br>
            {{scope.row.payStatusName}}
          </label>
          <label v-else>
            <label>{{scope.row.infofeeAmt}}</label>
          </label>
        </template>
      </el-table-column>
      <el-table-column prop="incomeAmt" label="收益金额(元)" width="100" header-align="center">
        <template slot-scope="scope">
          <label v-if="scope.row.payStatus === 101003003" style="color: red">
            {{scope.row.incomeAmt}}
          </label>
          <label v-else>{{scope.row.incomeAmt}}</label>
        </template>
      </el-table-column>
      <el-table-column prop="driverName" label="司机信息" width="120" header-align="center">
        <template slot-scope="scope">
          {{scope.row.driverName}}<br>
          {{scope.row.driverPhone}}<br>
          {{scope.row.plateNumber}}
        </template>
      </el-table-column>
      <el-table-column prop="startContactName" label="发货信息" width="200" header-align="center">
        <template slot-scope="scope">
          {{scope.row.startContactName}}<br>
          {{scope.row.startContactPhone}}<br>
          {{scope.row.startContactAddressNames}}
        </template>
      </el-table-column>
      <el-table-column prop="endContactName" label="收货信息" width="200" header-align="center">
        <template slot-scope="scope">
          {{scope.row.endContactName}}<br>
          {{scope.row.endContactPhone}}<br>
          {{scope.row.endContactAddressNames}}
        </template>
      </el-table-column>
      <el-table-column prop="cargoName" label="货物信息" width="120;" header-align="center">
        <template slot-scope="scope">
          {{scope.row.cargoName}}<br>
          {{scope.row.weight}} 吨<br>
          {{scope.row.volume}} 方
        </template>
      </el-table-column>
      <el-table-column prop="orderStatusName" label="状态" width="150" header-align="center">
        <template slot-scope="scope">
          订单状态:{{scope.row.orderStatusName}}<br>
          销账状态:{{scope.row.writeOffStatusName}}
        </template>
      </el-table-column>
    </el-table>
    <!--<el-col :span="24" class="toolbar">-->
      <!--<el-col :span="1">-->
        <!--<label>合计：</label>-->
      <!--</el-col>-->
      <!--<el-col :span="23">-->
        <!--<el-row>-->
          <!--<el-col :span="15">-->
            <!--运费合计 <span style="color: red">{{truckBellwetherIncomeForQuery.totalIncome}}</span> 元，-->
            <!--信息费合计 <span style="color: red">{{truckBellwetherIncomeForQuery.totalIncome}}</span> 元，-->
            <!--收益合计 <span style="color: red">{{truckBellwetherIncomeForQuery.totalIncome}}</span> 元，-->
            <!--挂账合计 <span style="color: red">{{truckBellwetherIncomeForQuery.totalIncome}}</span> 元，-->
          <!--</el-col>-->
        <!--</el-row>-->
        <!--<el-row>-->
          <!--<el-col :span="15">-->
            <!--已销账合计 <span style="color: red">{{truckBellwetherIncomeForQuery.totalIncome}}</span> 元，-->
            <!--可销账合计 <span style="color: red">{{truckBellwetherIncomeForQuery.totalIncome}}</span> 元，-->
            <!--不可销账合计 <span style="color: red">{{truckBellwetherIncomeForQuery.totalIncome}}</span> 元，-->
          <!--</el-col>-->
        <!--</el-row>-->
      <!--</el-col>-->
    <!--</el-col>-->
    <el-col :span="24" class="toolbar">
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total,sizes,prev, pager, next, jumper"
        :total="total" style="float: right">
      </el-pagination>
    </el-col>
    <truck-load-order-select-dialog
      :truckLoadModel="truckLoadModel"></truck-load-order-select-dialog>
  </section>
</template>

<script>
import {
  searchTruckBellwetherAcctTFlowList, getTruckBellwetherAcctByBellwetherId } from '../../../api/v3/TruckLoadProfit';
import TruckLoadOrderSelectDialog from '../TruckLoadOrderSelectDialog.vue';
import { resetObjNull, objToFilter } from '../../../lib/util.js';
export default {
  components: {
    TruckLoadOrderSelectDialog
  },
  data () {
    return {
      truckBellwetherId: this.$route.params.id,
      searchConditionEx: {
        loadingTimeDateRange: [], //  装车时间范围
        unloadTimeDateRange: [], //  卸车时间范围
        EQ_truckLoadOrderStatus: null, // 订单状态
        LIKE_truckLoadOrderTruckLoadDriverDriverName: null // 司机姓名
      },
      searchCondition: {
        'LIKE_truckLoadNumber': null, //  整车订单编号
        'GTE_truckLoadOrder.loadingTime': null, // 装车时间
        'LTE_truckLoadOrder.loadingTime': null,
        'GTE_truckLoadOrder.unloadTime': null, // 卸车时间
        'LTE_truckLoadOrder.unloadTime': null,
        'EQ_truckLoadOrder.status': null, // 订单状态
        'EQ_writeOffStatus': null, // 销账状态
        'LIKE_truckLoadOrder.truckLoadDriver.driverName': null // 司机姓名
      },
      truckBellwetherIncomeTotal: {
        'realName': null, // 领头羊姓名
        'totalIncome': 0.00, // 累计收益
        'totalWithdrawal': 0.00, // 已销账总额
        'avauseAmt': 0.00, // 可销账总额
        'freezeAmt': 0.00, // 不可销账总额
        'hangUp': 0.00 // 挂账金额
      },
      listLoading: false,
      sels: [],
      total: 0,
      currentPage: 1,
      pageSize: 10,
      sortProp: 'createdDate',
      sortOrder: 'descending',
      tableData: [],
      orderSelect: false,
      orderSelectForm: {},
      truckLoadModel: ''
    };
  },
  watch: {},
  methods: {
    selectTruckLoadDialogClick (row, isDisabled) {
      this.truckLoadModel = JSON.stringify(Object.assign({'id': row.truckLoadOrderId}, {
        'isShow': true,
        'isDisabled': isDisabled,
        'time': Math.random()
      }));
    },
    getSummaries (param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        let columnProperty = column.property;
        if (columnProperty === 'orderAmt' || columnProperty === 'infofeeAmt' || columnProperty === 'incomeAmt' || columnProperty === 'platformIncomeAmt') {
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            if (columnProperty === 'totalOrderNum') {
              sums[index] += ' 票';
            } else {
              sums[index] = sums[index].toFixed(2);
              sums[index] += ' 元';
            };
          } else {
            sums[index] = '';
          }
        }
      });
      return sums;
    },
    exportToExcel () {
      location.href = '/api/v3.0/admin/api/truck-bellwether-tflows/export?filters=' + this.toFilters();
    },
    // 返回收益汇总页面
    backClick () {
      this.$router.push('/settlement_platform/truck_bellwether_income');
    },
    // 根据领头羊id获取账户信息
    // 获取领头羊基本资料
    getObjInfoById () {
      getTruckBellwetherAcctByBellwetherId(this.$route.params.id).then(res => {
        let info = res.data;
        this.truckBellwetherIncomeTotal = info;
      });
    },
    // 根据领头羊id，查询条件查询列表
    // 查询列表执行
    loadingLists (filter = '') {
      this.listLoading = true;
      searchTruckBellwetherAcctTFlowList({
        filters: filter,
        size: this.pageSize,
        page: this.currentPage - 1,
        sort: this.sortProp === null ? 'createdDate,desc' : (this.sortProp + (this.sortOrder === 'ascending' ? ',asc' : ',desc'))
      }).then(res => {
        this.tableData = res.data;
        this.total = Number(res.headers['x-total-count']);
        this.listLoading = false;
      });
    },
    // 过滤条件
    toFilters () {
      let filters = objToFilter(this.searchCondition);
      filters += ';EQ_truckBellwether.id=' + this.truckBellwetherId;
      if (this.searchConditionEx.loadingTimeDateRange[0]) {
        filters += ';GTE_truckLoadOrder.loadingTime=' + this.searchConditionEx.loadingTimeDateRange[0].toJSON();
        filters += ';LTE_truckLoadOrder.loadingTime=' + this.$ue.addDays(this.searchConditionEx.loadingTimeDateRange[1], 1).toJSON();
      };
      if (this.searchConditionEx.unloadTimeDateRange[0]) {
        filters += ';GTE_truckLoadOrder.unloadTime=' + this.searchConditionEx.unloadTimeDateRange[0].toJSON();
        filters += ';LTE_truckLoadOrder.unloadTime=' + this.$ue.addDays(this.searchConditionEx.unloadTimeDateRange[1], 1).toJSON();
      };
      if (this.searchConditionEx.EQ_truckLoadOrderStatus) {
        filters += ';EQ_truckLoadOrder.status=' + this.searchConditionEx.EQ_truckLoadOrderStatus;
      };
      if (this.searchConditionEx.LIKE_truckLoadOrderTruckLoadDriverDriverName) {
        filters += ';LIKE_truckLoadOrder.truckLoadDriver.driverName=' + this.searchConditionEx.LIKE_truckLoadOrderTruckLoadDriverDriverName;
      };
      return filters;
    },
    // 列表查询调用
    searchTableList () {
      this.loadingLists(this.toFilters());
    },
    // 列表汇总调用
    init () {
      this.searchTableList();
      this.getObjInfoById();
    },
    // 每页几条操作
    handleSizeChange (val) {
      this.pageSize = val;
      this.searchTableList();
    },
    // 第几页操作
    handleCurrentChange (val) {
      this.currentPage = val;
      this.searchTableList();
    },
    resetSearchCondition () {
      resetObjNull(this.searchCondition);
      resetObjNull(this.searchConditionEx);
    }
  },
  // 初始化数据
  mounted () {
    this.init();
    this.$store.commit('initDict');
  }
};
</script>
